<template name="coverTitleBar">
	<view class="topFixed">

		<statusBar :bgColor="bgColor"></statusBar>

		<view class="ttBarBox" :style="{backgroundColor:bgColor,color:color}">

			<view class="leftBox" id="leftEvent" @tap="toPage">
				<text v-if="leftIcon" class="iconfont leftIcon" :class="leftIcon" :style="{color:color}"></text>
				<text v-if="leftText" class="leftText">{{ leftText }}</text>
			</view>
			<text v-if="title" class="title">{{ title }}</text>
			<view class="rightBox" id="rightEvent" @tap="toPage">
				<text v-if="rightText" class="rightText">{{ rightText }}</text>
				<text v-if="rightIcon" class="iconfont rightIcon" :class="rightIcon" :style="{color:color}"></text>
			</view>
		</view>
	</view>
</template>

<script>
	import statusBar from "../statusBar/statusBar.vue";
	export default {
		components:{coverTitleBar},
		name: 'ttBar',
		props: {
			title: {
				type: String,
				default: '页面标题',
			},
			leftIcon: {
				type: String,
				default: ''
			},
			rightIcon: {
				type: String,
				default: '',
			},
			leftText: {
				type: String,
				default: ''
			},
			rightText: {
				type: String,
				default: ''
			},
			leftTapFun: {
				type: Function,
				default: null
			},
			rightTapFun: {
				type: Function,
				default: null
			},
			bgColor: {
				type: String,
				default: '#FFFFFF'
			},
			color:{
				type:String,
				default:'#000000'
			}
		},
		methods: {
			toPage(e) {
				if (e.currentTarget.id == "leftEvent") {
					if (this.leftTapFun) {
						this.leftTapFun();
					} else {
						this.pBack()
					}
				} else {
					if (this.rightTapFun) {
						this.rightTapFun();
					} 

				}
			},
		},

	}
</script>

<style lang="less">
	@import "../../common/public.less";

	.topFixed {
		position: fixed;
		width: 100%;
		z-index: 999;
		height: 90upx;
		top: 0;
		left: 0;
	}

	.ttBarBox {
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		background-color: @color-m;
		left: 0;
		position: relative;
		padding: 0 34upx;
		.leftBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			left: 0;
			line-height: 90upx;

			.leftIcon {
				font-size: 40upx;
				margin-right: 10upx;

			}

			.leftText {}
		}

		.rightBox {
			display: flex;
			position: absolute;
			height: 100%;
			padding: 0 20upx;
			z-index: 999;
			align-items: center;
			top: 0;
			right: 0;
			/* #ifdef MP */
			right: 27%;
			/* #endif */
			line-height: 90upx;

			.rightIcon {
				font-size: 40upx;
				margin-left: 10upx;
			}

			.rightText {}
		}

		.title {
			display: inline-block;
			line-height: 90upx;
			width: 100%;
			text-align: center;
			/* #ifdef MP */
			padding-right: 27%;
			/* #endif */
			
		}

	}

</style>
